<template>
	<view class="content">
		<view class="dingbu" :style="{ opacity: headerOpacity }">
			<view class="chacha">
				<image src="/static/cha.png"></image>
				<view>
					<view class="bigtitles ">
						<view>{{ detail.name }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 编辑状态的时候 这个bgss 是可以替换背景图片的 -->
		<view class="bgss" @click.stop="editBgImage"
			:style="{ 'background-image': `url(${detail.bgImage || 'https://uimg.huixiaoer.net/86196272/b6d8196a274964bbdfb8aaddeafdfdac.jpg'})` }">
			<image class="imgs imglieft" src="/static/close.png" @click.stop="back"></image>
		</view>
		<view class="bianji" @click.stop="handleLongPress"></view>
		<view class="shang">
			<image class="shangimg" mode="widthFix" src="/static/shang.png"></image>
			<view class="neirongs">
				<view v-if="!isshow" class="goodtitle ">{{ detail.name }}
					<!-- [
					<image mode="widthFix" class="xing " src="/static/xing.png"></image>
					{{ detail.tiaojian1 }}
					<image mode="widthFix" class="xing" src="/static/xing.png"></image>{{ detail.tiaojian2 }}
					<image mode="widthFix" class="xing" src="/static/xing.png"></image>{{ detail.tiaojian3 }}] -->
				</view>
				<view v-if="isshow" class="goodtitle " style="display: flex"> <input style="width:180upx" v-if="isshow"
						class="lanborder" type="text" v-model="detail.name" />
					<!-- [
					<image mode="widthFix" class="xing " src="/static/xing.png"></image>
					<input style="width:100upx" v-if="isshow" class="lanborder" type="text" v-model="detail.tiaojian1" />
					<image mode="widthFix" class="xing" src="/static/xing.png"></image> <input style="width:100upx"
						v-if="isshow" class="lanborder" type="text" v-model="detail.tiaojian2" />
					<image mode="widthFix" class="xing" src="/static/xing.png"></image> <input style="width:100upx"
						v-if="isshow" class="lanborder" type="text" v-model="detail.tiaojian3" />] -->
				</view>
				<view class="theboxs">
					<view class="t1">
						<image mode="widthFix" style="width:29upx;display: block;float: left;" src="/static/1.png"></image>
						<text v-if="!isshow">{{ detail.t1 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t1" />
					</view>
					<view class="t2">
						<image mode="widthFix" style="width:29upx;display: block;float: left;" src="/static/2.png"></image>
						<text v-if="!isshow">{{ detail.t2 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t2" />
					</view>
					<view class="t3">
						<image mode="widthFix" style="width:29upx;display: block;float: left;" src="/static/3.png"></image>
						<text v-if="!isshow">{{ detail.t3 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t3" />
					</view>
					<view class="t4">
						<image mode="widthFix" style="width:29upx;display: block;float: left;" src="/static/4.png"></image>
						<text v-if="!isshow">{{ detail.t4 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t4" />
					</view>
					<view class="t5">
						<image mode="widthFix" style="width:29upx;display: block;float: left;" src="/static/5.png"></image>
						<text v-if="!isshow">{{ detail.t5 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t5" />
					</view>
					<view class="t6">
						<image mode="widthFix" style="width:29upx;display: block;float: left;" src="/static/6.png"></image>
						<text v-if="!isshow">{{ detail.t6 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t6" />
					</view>
					<view class="t7">
						<image mode="widthFix" style="width:29upx;display: block;float: left;" src="/static/7.png"></image>
						<text v-if="!isshow">{{ detail.t7 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t7" />
					</view>
					<view class="t8">
						<image mode="widthFix" style="width:29upx;display: block;float: left;" src="/static/8.png"></image>
						<text v-if="!isshow">{{ detail.t8 }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" type="text" v-model="detail.t8" />
					</view>
				</view>
			</view>
		</view>
		<view class="centers">
			<image class="centersimg" mode="widthFix" src="/static/centers.png"></image>
		</view>
		<view class="zhong">
			<image class="zhongimg" mode="widthFix" src="/static/zhong.png"></image>
			<view class="hanglie" v-if="!isshow">
				<view>{{ detail.s1 }}</view>
				<view>{{ detail.s2 }}</view>
				<view>{{ detail.s3 }}</view>
			</view>
			<view class="hanglie" v-if="isshow">
				<view><input class="lanborder" v-model="detail.s1" /></view>
				<view><input class="lanborder" v-model="detail.s2" /></view>
				<view><input class="lanborder" v-model="detail.s3" /></view>
			</view>
		</view>
		<view class="linebox">
			<view class="lines" v-for="(bigitem, index) in detail.itemlist" :key="index">
				<view class="overs">
					<view class="lefts">
						<text v-if="!isshow">{{ bigitem.leftname }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" v-model="bigitem.leftname" />
						<text v-if="isshow" style="color: white;background: red;line-height: 50upx;padding: 0 10upx;"
							@click.stop="removeLine(index)">删除</text>
					</view>
					<view class="rights">
						<text v-if="!isshow">{{ bigitem.rightvalue }}</text>
						<input style="width:180upx" v-if="isshow" class="lanborder" v-model="bigitem.rightvalue" />
					</view>
				</view>
			</view>
		</view>
		<view class="zhongxai">
			<image class="zhongxaiimg" mode="widthFix" src="/static/zhongxai.png"></image>
		</view>
		<view class="prices" v-if="!isshow">
			<view>每间每晚<text>￥</text><text>{{ detail.price }}</text>
			</view>
		</view>

		<view class="prices" v-if="isshow">
			<view>每间每晚<text>￥</text>
				<input style="float: right;width:100upx" class="lanborder" v-model="detail.price" />
			</view>
		</view>
		<!-- 点击添加明细的时候  detail.itemlist 这个新增一行 -->
		<view class="flexss">
			<button class="buttons" v-if="isshow" @click.stop="addLine">添加明细</button>
			<button class="saves" v-if="isshow" @click.stop="saveData">保存</button>
		</view>

		<view style="height:160upx" v-if="isshow"></view>
		<view class="bottombtns">
			<image class="bottombtn" mode="widthFix" src="/static/bottombtn.png"></image>
			<view class="postionts">
				<view class="linetos" v-if="!isshow">
					<view class="linethor">￥{{ detail.yuanjia }}</view>
					<view class="red">￥</view>
					<view class="red niprices">{{ detail.price }}</view>
				</view>
				<view class="linetos" v-if="isshow">
					<view class="linethor"> <input class="lanborder" style="width:100upx;text-align: right;font-size:20upx"
							v-model="detail.yuanjia" /></view>
					<view class="red">￥</view>
					<view class="red niprices"><input class="lanborder"
							style="width:100upx;text-align: right;font-size:30upx" v-model="detail.price" /></view>
				</view>
				<view class="yuouhui">
					<text class="xm" v-if="!isshow">{{ detail.youhui }}</text>
					<text class="xm" v-if="isshow">
						<input class="lanborder" style="width:150upx;font-size:20upx" v-model="detail.youhui" /></text>
					<image class="yiwen" mode="widthFix" src="/static/yiwen.png"></image>
				</view>
			</view>
		</view>
		<!-- <view class="waterMarker"></view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			headerOpacity: 0, // 初始透明度为0
			isshow: false,
			detail: {
				bgImage: '',
				s1: "每间每晚优惠18元，每订单最高优惠18元",
				s2: "每间每晚优惠18元，每订单最高优惠18元",
				s3: "每间每晚优惠18元，每订单最高优惠18元",
				youhui: "3项优惠56",
				yuanjia: '175',
				price: 120,
				itemlist: [
					{ leftname: "房费", rightvalue: "￥50" },
				],
				t1: "1张大床1.8米",
				t2: " 20-25㎡",
				t3: "13-23层",
				t4: "有窗",
				t5: "WIFI免费",
				t6: "可吸烟",
				t7: "2人",
				t8: "无早餐",
				name: "丽致影音大床房",
				tiaojian1: "开水壶",
				tiaojian2: "可开税票",
				tiaojian3: "冰箱",
			}
		}
	},
	onLoad(option) {
		this.loadData();
		let theitem = JSON.parse(option.items)
		console.log(theitem)
		this.detail.name = theitem.name
		this.detail.bgImage = theitem.image
		this.detail.price = theitem.price
		this.detail.yuanjia = theitem.yuanprice
		this.detail.tiaojian1 = theitem.tiaojian1
		this.detail.tiaojian2 = theitem.tiaojian2
		this.detail.tiaojian3 = theitem.tiaojian3
	}, onPageScroll(e) {
		// 监听页面滚动事件
		const scrollTop = e.scrollTop;
		const opacity = Math.min(scrollTop / 100, 1); // 滚动距离超过100时透明度为1
		this.headerOpacity = opacity;
	},
	methods: {
		handleLongPress() {
			this.isshow = true
		},
		// 加载本地数据
		loadData() {
			const savedData = uni.getStorageSync('detailData');
			if (savedData) {
				this.detail = JSON.parse(savedData);
			}
		},
		// 保存数据到本地
		saveData() {
			uni.setStorageSync('detailData', JSON.stringify(this.detail));
			this.isshow = false;
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			});
		},
		// 编辑背景图片
		editBgImage() {
			if (!this.isshow) return;

			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success() {
					// 权限已授予
					this.chooseImage();
				},
				fail() {
					uni.showModal({
						content: '需要相册权限',
						confirmText: '去设置',
						success(res) {
							if (res.confirm) {
								uni.openSetting();
							}
						}
					});
				}
			});



		},
		chooseImage() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					this.detail.bgImage = res.tempFilePaths[0];
				}
			});
		},
		// 添加明细行
		addLine() {
			this.detail.itemlist.push({
				leftname: "新项目",
				rightvalue: "￥0"
			});
		},
		// 删除明细行
		removeLine(index) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这一行吗？',
				success: (res) => {
					if (res.confirm) {
						this.detail.itemlist.splice(index, 1);
					}
				}
			});
		},
		// 返回
		back() {
			uni.navigateBack();
		},
		// 长按进入编辑模式
		handleLongPress() {
			this.isshow = true;
		}
	},

}
</script>

<style scoped>
.bigtitles>view {
	width: 450upx;
	white-space: nowrap;
	/* 禁止换行 */
	overflow: hidden;
	/* 隐藏溢出内容 */
	text-overflow: ellipsis;
	/* 显示省略号 */
	/* 或者指定一个固定宽度 */
}

.bigtitles {
	width: 600upx;
	text-align: center;
	margin: 0 auto;
	display: flex;
	line-height: 90upx;
	justify-content: center;
	justify-items: center;
}

.bigtitles * {
	float: left;
}

.bigtitles .xing {
	float: left !important;
}

.dingbu {

	position: fixed;
	left: 0;
	width: 100%;
	height: 90upx;
	background: white;
	z-index: 999;
	opacity: 0;
	/* 初始透明度为0 */
	transition: opacity 0.3s;
	/* 添加过渡效果 */
}

.dingbu image {
	width: 30upx;
	position: absolute;
	left: 20upx;
	top: 50%;
	transform: translateY(-50%);
	height: 30upx;
}

.waterMarker {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;

	opacity: 0.5;
	z-index: 999999999;
	pointer-events: none;
	background: url("/static/watermarker.svg");
}

.bianji {
	position: absolute;
	width: 100upx;
	height: 100%;
	right: 0px;
	top: 0upx;
	/* background: Red */
}

.lanborder {
	border: solid 1px rgb(0, 102, 255);
	color: white;
	background: rgba(34, 34, 34, 0.6);
}

.linethor {
	text-decoration: line-through;
}

.hanglie>view {
	line-height: 55upx;
}

.yiwen {
	display: block;
	width: 25upx;
}

.zhong {

	position: relative;
}

.hanglie {
	position: absolute;
	top: 148upx;
	font-size: 24upx;
	padding-left: 150upx;
	color: #474747;
	box-sizing: border-box;
}

.xm {
	margin-right: 5upx;
}

.yuouhui {
	padding: 0 10upx;
	background: #ffcb06;
	border-radius: 5upx;
	border-bottom-left-radius: 50upx;
	border-top-right-radius: 50upx;
	border-bottom-right-radius: 50upx;
	font-size: 20upx;
}

.niprices {
	font-size: 35upx;
	font-weight: bold;
}

.linetos view {
	line-height: 50upx;
}

.linetos view:nth-child(1) {
	transform: translateY(5upx);
}

.linetos view:nth-child(2) {
	transform: translateY(5upx);
}

.linetos {
	color: #595959;
	display: flex;
	justify-content: center;
	justify-items: center;
}

.red {
	font-weight: bold;
	color: #e02020;
}

.yuouhui {
	display: flex;
	justify-content: center;
	justify-items: center;
}



.bottombtns {
	position: fixed;
	bottom: 0;
	width: 100%;
}

.postionts {
	position: absolute;
	right: 300upx;
	bottom: 25upx;
}

.bottombtn {
	width: 100%;
	display: block;
}

.saves {



	padding: 5upx;
	font-size: 20upx;
	margin-right: 10upx;
	border-radius: 23upx;
	background: rgb(0, 64, 153);
	color: white;
	width: 200upx;
	text-align: center;
	margin: 0 auto;
	margin-top: 50upx;
}

.buttons {

	padding: 5upx;
	font-size: 20upx;
	margin-right: 10upx;
	border-radius: 23upx;
	border: solid 1upx rgb(0, 64, 153);
	color: rgb(0, 64, 153);
	width: 200upx;
	text-align: center;
	margin: 0 auto;
	margin-top: 50upx;
}

.prices {
	text-align: right;
	font-size: 20upx;
	color: #343434;
	padding-right: 20upx;
	background: white;
	margin-top: -10upx;
	padding-bottom: 170upx;
}

.prices text {
	font-weight: bold;
	color: #e02020;
}

.prices text:last-child {
	font-size: 40upx;
	font-weight: bold;
}

.lines:last-child {
	border-bottom: none;
}

.centersimg {
	width: 100%;
}

.centersimgimg {
	width: 100%;
}

.zhongxai {
	width: 100%;
}

.zhongxaiimg {
	width: 100%;
}

.overs {
	font-size: 26upx;
	overflow: hidden;
	padding: 0 20upx;
	line-height: 80upx;
}

.lefts {
	float: left;
	display: flex;
	justify-content: center;
	justify-items: center;
}

.lines {
	border-bottom: solid 1px #f5f5f5;
}

.linebox {
	background: white;
	margin-top: -10upx;
}

.rights {
	float: right;
}

.zhongimg {
	width: 100%;
}

.t1 {
	position: absolute;
	font-size: 23upx;
	left: 30upx;
	top: 28upx
}

.t2 {
	position: absolute;
	font-size: 23upx;
	left: 265upx;
	top: 28upx
}

.t3 {
	position: absolute;
	font-size: 23upx;
	left: 510upx;
	top: 28upx;
}

.t4 {
	position: absolute;
	font-size: 23upx;
	left: 30upx;
	top: 78upx
}

.t5 {
	position: absolute;
	font-size: 23upx;
	left: 265upx;
	top: 78upx
}

.t6 {
	position: absolute;
	font-size: 23upx;
	left: 510upx;
	top: 78upx
}

.t7 {
	position: absolute;
	font-size: 23upx;
	left: 30upx;
	top: 130upx
}

.t8 {
	position: absolute;
	font-size: 23upx;
	left: 30upx;
	top: 180upx
}

.theboxs {
	width: 100%;
	height: 250upx;
	position: relative;
}

.theboxs>view {
	height: 40upx;
}

.theboxs>view>text {
	position: relative;
	display: block;
	float: left;
	top: 50%;
	transform: translateY(-50%);
}

.theboxs>view>image {
	position: relative;
	margin-right: 5upx;
	top: 50%;
	transform: translateY(-50%);
}

.xing {
	width: 30upx;
	transform: translateY(5upx);
}

.goodtitle {
	font-size: 32upx;
	font-weight: bold;
	margin-left: 20upx;
}

.neirongs {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	padding-top: 20upx;
	box-sizing: border-box;
}

.shang {
	width: 100%;
	position: relative;
	margin-top: -20upx;
}

.shangimg {
	width: 100%;
}

.imgs {
	width: 50upx;
	height: 50upx;
	background: rgba(0, 0, 0, 0.58);
	border-radius: 50%;
	box-sizing: border-box;
}

.bgss {
	width: 100%;
	height: 450upx;
	background-size: cover;

	background-position: center;
}

.content {
	background: rgb(244, 245, 249);
	min-height: 100vh;
}

.imgs {
	width: 50upx;
	height: 50upx;
	background: rgba(0, 0, 0, 0.58);
	border-radius: 50%;
	padding: 10upx;
	box-sizing: border-box;
	margin-top: 130upx;
	margin-left: 20upx;
}


.flexss {
	width: 70%;
	margin: 0 auto;
	padding-bottom: 200upx;
	display: flex;
	justify-content: center;
	justify-items: center;
}
</style>
